<template>
    <div class="todo-info">
        <span class="total">{{total}} item left</span>
        <div>
            <a href="#" v-for="(item, index) in states" :key="index" :class="[ activeIndex === index ? 'active':'' ]" @click="changeIndex(index)">{{item}}</a>
        </div>
        <button class="clear" @click="clear">Clear Completed</button>
    </div>
</template>

<script>
export default {
    name: 'TodoInfo',
    props: ['total'],
    data() {
        return {
            states: ['all', 'active', 'completed'],
            activeIndex: 0
        }
    },
    methods: {
        // 改变激活状态
        changeIndex(index) {
            this.activeIndex = index
            this.$emit('changeIndex',index)
        },
        // 清理所有数据
        clear() {
            this.$emit('clear')
        }
    }
}
</script>

<style lang="less" scoped>
@import '~css/theme.less';
.todo-info {
    border-top: 1px solid rgba(0, 0, 0, .1);
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    font-weight: 400;
    line-height: 30px;
    .total {
        color: @red;
    }
    div {
        display: flex;
        justify-content: space-between;
        width: 200px;
        a {
            border: 1px solid @lightred;
            padding: 0 10px;
            border-radius: 5px;
            &.active {
                background-color: @lightgreen;
                color: white;
            }
        }
    }
    .clear {
        border: none;
        outline: none;
        appearance: none;
        color: #fff;
        border-radius: 5px;
        background-color: @green;
        padding: 0 10px;
        cursor: pointer;
    }
}
</style>